{% extends "orgs/base.html" %}
{% load org_tags %}
{% load i18n %}

{% block head_title %}Edit Circle Event {{ event }}{% endblock %}

{% block extra_head %}
{{ block.super }}
<link rel="stylesheet" href="{{ MEDIA_URL }}jquery-ui-themeroller.css" type="text/css" media="screen" />
{% endblock %}

{% block body %}
    
	
	<h1>Edit <a href="{% url circle_event event_id=event.id %}">{{ event }}</a></h1>
		
	<div style="margin-top: 1em;" >
		<form id="event_form" method="POST" action="">
			<table>
				{{ event_form }}
				<tr><td></td><td><input class="submit-btn" type="submit" value="{% trans "update" %}"/></td></tr>
			</table>
		</form>
	</div>
    
{% endblock %}

{% block extra_body %}
	{{ block.super }}
	<script type="text/javascript" src="{{ MEDIA_URL }}jquery-ui-datepicker.js"></script>
    <script type="text/javascript">
		
	var originalStartTime = ""
	var originalEndTime = ""
		
	$(document).ready(function() {		
		$("#id_start_0").datepicker({dateFormat: $.datepicker.ATOM});
		$("#id_end_0").datepicker({dateFormat: $.datepicker.ATOM});
		$("#id_end_recurring_period_0").datepicker({dateFormat: $.datepicker.ATOM});
		$("#id_start_1").blur(validateStartTime);
		$("#id_end_1").blur(validateEndTime);
		originalStartTime = $("#id_start_1").attr("value");
		originalEndTime = $("#id_end_1").attr("value");
	});
		
	function validateTime(event, originalTime) 
	{
		var candidate = event.target.value;
		var RegExPattern = /^\d{1,2}[:]\d{2}$/;
		var valid = true;
		if (!candidate.match(RegExPattern)) 
		{ 
			var values = candidate.split(":");
			if (values.length == 1)
			{
				var RegExPattern = /^\d{1,2}$/;
				if (candidate.match(RegExPattern))
				{
					if ( (parseFloat(values[0]) > 0) && (parseFloat(values[0]) < 13) )
					{
						event.target.value = values[0] + ":00";
						return;
					}
					else { valid = false; }
				} 
				else { valid = false; }								
			}
			else { valid = false; }
		}
		if (valid)
		{
			var values = candidate.split(":");
			if ( (parseFloat(values[0]) < 1) || (parseFloat(values[0]) > 12) ) { valid = false; }
			if (valid)
			{

				if ( (parseFloat(values[1]) < 0) || (parseFloat(values[1]) > 59) ) { valid = false; }
			}
		}
		if (!valid)
		{
			var targetId = "#" + event.target.id;
			$(targetId).fadeIn("slow", function () {
				event.target.style.color = "red";
				event.target.value = "invalid time";
				$(targetId).fadeOut(1500, function () {
					event.target.style.color = "black";
					event.target.value = originalTime;
					$(targetId).fadeIn("slow", function () {
						event.target.style.color = "black";
						event.target.value = originalTime;
					  });
				});			
			});
		}
	}
	
	function validateStartTime(event)
	{
		validateTime(event, originalStartTime)
	}

	function validateEndTime(event)
	{
		validateTime(event, originalEndTime)
	}
		
    </script>
{% endblock %}